import { Button, ButtonProps, Dropdown, MenuProps, theme } from 'antd'
import { ReactNode, useState } from 'react'
export interface AppMenuItemAction {
    label?: ReactNode
    onClick?: () => void
    danger?: boolean
}
export interface AppMenuItemProps extends ButtonProps {
    actions?: AppMenuItemAction[];
    actionIcon?: ReactNode;
    selected?: boolean
}


const UserMenuItem: React.FC<AppMenuItemProps> = (props) => {
    const {token} = theme.useToken()
    const items: MenuProps['items'] = props.actions?.map((a, i) => ({
        key: i.toString(),
        label: a.label,
        onClick: a.onClick,
        danger: a.danger
    })) || []
    const [showActionIcon, setShowActionIcon] = useState<boolean>(false)
    const MenuCSS: React.CSSProperties = {
        padding: 0,
        margin: 0,
        height: 40,
        lineHeight: '40px',
        paddingInline: 16,
        textOverflow: 'ellipsis',
        marginBlock: 4,
        marginInline: 4,
        width: 'calc(100% - 8px)',
        textAlign: 'justify',
        borderRadius: 8,
    }
    const selectCSS: React.CSSProperties = {
        backgroundColor: props.selected ? token.controlItemBgActive : ''
    }
    const actionIconCSS: React.CSSProperties = {
        position: 'absolute',
        right: '12%',
    }
    const actionIconElement = (
        <Dropdown menu={{ items }} >
            <span style={{ ...actionIconCSS, visibility: showActionIcon && props.selected ? 'visible' : 'hidden' }}>
                {props.actionIcon}
            </span>
        </Dropdown>
    )
    return (
        <>
            <Button
                onMouseEnter={() => setShowActionIcon(true)}
                onMouseLeave={() => setShowActionIcon(false)}
                style={{ ...MenuCSS, ...selectCSS }}
                type='text'
                icon={props.icon}
                onClick={props.onClick}
            >
                {props.children}
                {actionIconElement}
            </Button>
        </>
    )
}
export default UserMenuItem